<template>
  <div>
    <el-dialog
      title="欢迎充值"
      :visible.sync="dialogVisible">

        <el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane label="立即充值" name="first">
              <div class="outer">
              <el-card class="cards" :body-style="{ padding: '0px' }" shadow="hover">
                <span>青铜会员</span>
                <img class="pic" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267831517,1788726324&fm=26&gp=0.jpg">
                <div class="other" style="padding: 14px;">

                  <div class="bottom clearfix">
                    <!--<time class="time">{{ currentDate }}</time>-->
                    <span></span>
                    <el-button type="button" class="button" @click="pay(9)">确定</el-button>
                  </div>
                </div>
              </el-card>
              <el-card class="cards" :body-style="{ padding: '0px' }" shadow="hover">
                <span>钻石会员</span>
                <img  class="pic" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1609772095,907218417&fm=26&gp=0.jpg">
                <div class="other" style="padding: 14px;">

                  <div class="bottom clearfix">
                    <span></span>
                    <el-button type="button" class="button" @click="pay(900)">确定</el-button>
                  </div>
                </div>
              </el-card>
              <el-card class="cards" :body-style="{ padding: '0px' }" shadow="hover">
                <span>王者会员</span>
                <img  class="pic" src="" >
                <div class="other" style="padding: 14px;">

                  <div class="bottom clearfix">
                    <span></span>
                    <el-button class="button" type="button" @click="pay(90000)">确定</el-button>
                  </div>
                </div>
              </el-card>
              </div>
            </el-tab-pane>
            <el-tab-pane label="充值记录" name="second">
              <div class="outer">
              <template>
                <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="payId"
                    label="订单编号"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="payTime"
                    label="充值时间"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="payMoney"
                    label="金额"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="payStatus"
                    label="状态"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                      <el-button type="success" plain @click="pay(scope.row.payMoney)">去支付</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>

    </el-dialog>
    <div v-html="alipayWap" ref="alipayWap"></div>
  </div>
</template>

<script>
  import axios from "axios";
  axios.defaults.withCredentials=true;
  export default {
    name: "chongzhi",
    data() {
      return {
        payHistory: {
          payMoney: '',
        },
        alipayWap: '',
        dialogVisible:true,
        tableData:[],
        activeName: 'first',
      }
    },
    methods:{
      pay:function(payMoney){
        this.payHistory.payMoney=payMoney;
        axios.post("http://localhost/kd-user/pay",this.payHistory).then(res=>{
          this.alipayWap=res.data;
          this.$nextTick(() => {
            this.$refs.alipayWap.children[0].submit()
          })
        })
      },
      getPayHistory:function(){
        var token=this.$cookie.get("token");
        axios.post("http://localhost/kd-user/user/getPayHistory",{token:token}).then(res=>{
          if(res.data.code==200){
            this.tableData=res.data.data;
          }
        })
      },
    },
    mounted(){
      this.getPayHistory();
    }
  }
</script>

<style scoped>
  .outer {
    margin: auto;
    width: 540px;
    height: 515px;
  }

  .pic{
    width: 270px;
    height: 125px;
  }

  .other{
    float: right;
  }

  .cards{
    width: 500px;
    height: 140px;
    float: left;
    margin: 10px 10px 0 0;
  }

  .button{
    margin-top: 20px;
    background-color: rgb(255,215,0);
  }



  ::-webkit-scrollbar{
    /*垂直滚动条的宽*/
    width: 5px;
    height: 16px;
  }
  ::-webkit-scrollbar-track-piece{
    /*修改滚动条的背景和圆角*/
    background: #abcdef;
    -webkit-border-radius: 6px;
  }
  /*修改垂直滚动条的样式*/
  ::-webkit-scrollbar-thumb:vertical{
    background-color: #ffffff;
    -webkit-border-radius: 6px;
  }

  /*修改水平滚动条的样式*/
  ::-webkit-scrollbar-thumb:horizontal{
    background-color: #faa;
    -webkit-border-radius: 6px;
  }

</style>
